<template>
  <div>
    <el-dialog
      title="送券"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-input v-model="name" style="width: 200px;margin-right: 5px" placeholder="按姓名名称查询"></el-input>
      <el-date-picker
        style="margin-right: 5px"
        v-model="dateTime"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" @click="handleInit">查询</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="portrait"
          label="头像">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.portrait"
              fit="fit"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="注册日期"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleNext"
        background
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleAdd">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getList} from "@/api/toolUser";
  import {sonCoupon} from "@/api/coupon";

  export default {
    name: "son",
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        total: 1,
        page: 1,
        size: 10,
        name: '',
        dateTime: [],
        form: {
          cid: '',
          uid: []
        }
      }
    },
    methods: {
      show(id) {
        this.form = {
          cid: '',
          uid: []
        }
        this.form.cid = id
        this.handleInit()
        this.dialogVisible = true
      },
      handleInit() {
        let startTime = ''
        let endTime = ''
        if (this.dateTime !== null && this.dateTime !== '') {
          startTime = this.dateTime[0]
          endTime = this.dateTime[1]
        }
        getList(this.page, this.size, this.name, startTime, endTime).then(res => {
          console.log(res)
          this.tableData = res.result.records
          this.total = Number(res.result.total)
        })
      },
      handleAdd() {
        this.form.uid = this.form.uid.toString();
        sonCoupon(this.form).then(res => {
          if (res.status === 200) {
            this.$message.success("成功送券")
            this.dialogVisible = false
            this.$emit("Ok")
          }
        })
      },
      handleNext(e) {
        this.page = e
        this.handleInit()
      },
      handleSelectionChange(e) {
        this.form.uid = []
        for (var i = 0; i < e.length; i++) {
          this.form.uid.push(e[i].id)
        }
      }
    }
  }
</script>

<style scoped>

</style>
